
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>公告管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/showBigImage.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all">
</head>
<style>
    .layui-table-cell {
        text-align: center;
        height: auto !important;
        white-space: normal;
    }
</style>
</head>
<body>
<div class="layuimini-container ">
    <div class="layuimini-main">

        <%-- 表头工具条--%>
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="addCarousel">添加公告</a>
                <a class="layui-btn layui-btn-danger layui-btn-sm data-count-edit" lay-event="batchDelist">批量删除</a>
            </div>
        </script>

        <%-- 启用状态开关按钮--%>
        <script type="text/html" id="shelfStateSwitch">
            <input type="checkbox" name="status" value="{{= d.id }}" title="已启用|已停用" lay-skin="switch"
                   lay-filter="Switch"
                   {{# if (d.state== 1) { }}
                   checked
                   {{# } }}>
        </script>

        <%-- --%>
        <table class="layui-hide" id="announcementTable" lay-filter="announcementTableFilter"></table>

        <%-- 行内操作工具条--%>
        <script type="text/html" id="announcementTableBar">
            <a class="layui-btn layui-btn-danger layui-btn-sm data-count-edit" lay-event="update">删除</a>
        </script>

    </div>
</div>

<script>
    layui.use(['form', 'table', 'element', 'layer'], function (message) {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        dropdown = layui.dropdown;


        /**
         * 表格渲染
         */
        table.render({
            elem: '#announcementTable',
            autoSort: true,
            request: {
                pageName: 'pageNum', // 页码的参数名称，默认：page
                limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
            },
            url: '${pageContext.request.contextPath}/manager/announcement/list',
            toolbar: '#toolbar',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox"},
                {title: '序号', type: "numbers", align: "center"},
                {field: 'id',  title: '轮播图编号', sort: true,hide:true},
                {field: 'text', title: '公告内容'},
                {field: 'createTime',  title: '推送时间', align: 'center', templet:
                        function(d){
                            var timeStr = d.createTime.toString();
                            var timeArr = timeStr.split(",");
                            var year = timeArr[0];
                            var month = timeArr[1];
                            var day = timeArr[2];
                            var hour = timeArr[3];
                            var minute = timeArr[4];
                            var second = timeArr[5];
                            return year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second;
                        }
                        },
                {field: 'state', title: '启用状态', align: 'center', templet: "#shelfStateSwitch", sort: true},
                {
                    title: '操作', minWidth: 150, toolbar: '#announcementTableBar', align: "center"
                }
            ]],
            limits: [4, 15, 20, 25, 50, 100],
            limit: 4,
            page: true,
            loading: true,
            skin: 'line',
        });

        /**
         * 触发表格复选框选择
         */
        table.on('checkbox(announcementTable)', function (obj) {
            console.log(obj)
        });

        /**
         * 表格头部工具条事件
         */
        table.on('toolbar(announcementTableFilter)', function (obj) {
            if (obj.event === 'addCarousel') {
                var index = layer.open({
                    title: '添加公告',
                    type: 2,
                    shade: 0.2,
                    offset: 'lt',
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '${pageContext.request.contextPath}/manager/announcement/openAddUpdate',
                    end: function () {
                        table.reload('announcementTable', {}, 'data');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });

        /**
         * 启用状态开关事件
         */
        form.on('switch(Switch)', function (obj) {
            $.ajax({
                url: '${pageContext.request.contextPath}/manager/announcement/updateState',
                data: {
                    id: this.value
                },
                type: 'POST',
                success: function () {
                    layer.msg('更新成功')
                },
                error: function (xhr, textStatus, errorThrown) {
                    layer.msg('更新失败')
                }
            });
        });

    });
</script>
</body>
</html>
